import React, {Component, Fragment} from 'react';
import { connect} from "react-redux"
import {Button} from "antd";
import { add, reduce} from "../../actions/test";

const mapStateToProps = (state, props) => {
    return {
        number: state.test.number
    }
}

const mapDispatchToProps = (dispatch, props) => {
    return {
        add: (num) => {
            dispatch(add(num))
        },
        reduce: (num) => {
            dispatch(reduce(num))
        }
    }
}

@connect(mapStateToProps,mapDispatchToProps)

class Index extends Component {
    reduce = () => {
        const number = Math.ceil(Math.random()*10)
        this.props.reduce(number)
    }
    add = () => {
        const number = Math.ceil(Math.random()*10);
        this.props.add(number)
    }
    render() {
        return (
            <Fragment>
                <Button onClick={this.reduce}>
                    减随机数
                </Button>
                <span>{this.props.number}</span>
                <Button onClick={this.add}>
                    加随机数
                </Button>
            </Fragment>
        );
    }
}

export default Index;